<template>
  <view class="viewport">

    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="uni-nav-bar-header">
          <view class="tabs-container">
            <z-tabs ref="tabs" bgColor="rgba(255, 255, 255, 0)" :current="swiperCurrent" :list="tabsList"
              value-key="code" bar-animate-mode="worm" :active-style="{ 'font-size': '30rpx', color: '#333' }"
              :inactive-style="{ 'font-size': '30rpx', color: '#6c6c6c' }" :bar-style="{
                background: '#333', borderRadius: '2px'
              }" bar-height="6rpx" bar-width="36rpx" @change="tabsChange"> </z-tabs>
          </view>
        </view>

      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">{{ navigateTitle }}</view>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="mp-toutiao">
      <view class="tabs-container">
        <z-tabs ref="tabs" bgColor="rgba(255, 255, 255, 0)" :current="swiperCurrent" :list="tabsList" value-key="code"
          :active-style="{ 'font-size': '30rpx', color: '#333' }"
          :inactive-style="{ 'font-size': '30rpx', color: '#6c6c6c' }" :bar-style="{
            background: '#333', borderRadius: '2px'
          }" bar-height="6rpx" bar-width="36rpx" @change="tabsChange"> </z-tabs>
      </view>
    </view>

    <!-- #endif -->
    <swiper class="swiper" :current="swiperCurrent" @transition="swiperTransition"
      @animationfinish="swiperAnimationfinish">
      <swiper-item>
        <ErrorRecords :base-type="baseType!"></ErrorRecords>
      </swiper-item>
      <swiper-item>
        <CollectRecords :base-type="baseType!"></CollectRecords>
      </swiper-item>
    </swiper>
  </view>

</template>

<script lang="ts" setup>
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { ref, reactive, computed } from 'vue'
  import zTabs from '@/components/z-tabs/z-tabs.vue'
  import ErrorRecords from './components/ErrorRecords.vue'
  import CollectRecords from './components/CollectRecords.vue'



  // #ifdef MP
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // #endif
  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif

  const baseType = ref<string>()
  const tabs = ref<any>(null)
  const tabsList = reactive<string[]>(['错题集', '收藏夹'])
  const swiperCurrent = ref<number>(0)


  onLoad((options: any) => {
    baseType.value = options.baseType
  })

  onShow(() => {
  })

  // tabs通知swiper切换
  const tabsChange = (index: number, value: string) => {
    swiperCurrent.value = index
  }
  // swiper滑动中
  const swiperTransition = (e: any) => {
    tabs.value?.setDx(e.detail.dx)
  }
  // swiper滑动结束
  const swiperAnimationfinish = (e: any) => {
    swiperCurrent.value = e.detail.current
    tabs.value?.unlockDx(e.detail.dx)
  }

  // #ifdef MP-TOUTIAO
  const navigateTitle = computed(() => {
    return tabsList[swiperCurrent.value]
  })

  // #endif
  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-image: linear-gradient(180deg,
        #d0ffe7 0%,
        #f8f8f8 30%,
        #ffffff 100%);
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-weight: bold;
    }

    .uni-nav-bar-header {
      width: 100%;
      display: flex;
      justify-content: center;

      .tabs-container {
        width: 280rpx;
      }
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 36rpx;
        // font-weight: bold;
      }
    }
  }

  .mp-toutiao {
    display: flex;
    justify-content: center;
    margin-top: -40rpx;

    .tabs-container {
      width: 280rpx;
    }
  }

  /* #endif */



</style>
